<template>
   <div id="recycle-bin-page" class="recycle-bin-box">
    <mobile-navbar :name="$t('message.silder.recycleBin')" @back="handleBack" :isBackPath="!isOpenChecks" :buttonType="!isOpenChecks?'icon':'text'">
      <template v-slot:right v-if="fileList.length!=0">
        <div class="checks-button" @click="openChecks()">{{isOpenChecks?$t('message.buttons.checkAll'):$t('message.mobile.checkeds')}}</div>
      </template>
    </mobile-navbar>
    <div class="lately-list" :style="{height:isOpenChecks?'calc(100% - 7.375rem)':'calc(100% - 3.125rem)'}">
      <mobileScroll :ops="scrollOps" :openPullDown="true" :openUpload="false" @refreshStart="handleRS" v-if="fileList.length!=0">
        <div v-for="(item,index) in fileList" :key="index" class="lately-item">
          <div class="check-box" v-if="isOpenChecks" @click="changeCheck(item,index)">
            <svg class="icon" aria-hidden="true">
              <use v-bind:xlink:href="`#${item.isCheck?'keowledge-mobile-a-111':'keowledge-mobile-weixuanzhong'}`"></use>
            </svg>
          </div>
          <div class="lately-item-icon">
            <svg class="icon" aria-hidden="true">
              <use v-bind:xlink:href="getIcon(item.type,item.nameSuffix)"></use>
            </svg>
          </div>
          <div class="lately-item-content" :style="{width:isOpenChecks?'calc(100% - 2.3125rem)':'calc(100% - 0.125rem)'}">
            <div class="content" :style="{width:isOpenChecks?'calc(100vw - 6.3125rem)':'calc(100vw - 4.125rem)'}">
              <div class="name">{{item.name}}</div>
              <div class="time">{{item.updateTime}}</div>
            </div>
          </div>
        </div>
      </mobileScroll>
      <jvs-empty v-if="fileList.length==0"></jvs-empty>
    </div>
    <div v-if="isOpenChecks" class="actions-box">
      <div class="recycle-button" @click="doAction('recover')">
        <svg class="icon" aria-hidden="true">
          <use v-bind:xlink:href="`#keowledge-mobile-huifu`"></use>
        </svg>
        <div class="name">{{$t('message.mobile.restoreDocument')}}</div>
      </div>
      <div class="recycle-line"></div>
      <div class="recycle-button" @click="doAction('thorough')">
        <svg class="icon" aria-hidden="true">
          <use v-bind:xlink:href="`#keowledge-mobile-chedishanchu`"></use>
        </svg>
        <div class="name">{{$t('message.text.comDelete')}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileNavbar from './mobileNavbar.vue';
import mobileScroll from './mobileScroll.vue'
import { knowledgeRecycle,dclRetrieve,delLib  } from '@/api/knowledge'
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({

})

const fileList = ref([])
const isOpenChecks = ref(false)
const page = ref({
  size:20,
  current:1
})
const scrollOps= ref({
  click:true,
  observeDOM: true,
  probeType: 3,
  pullDownRefresh: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
  },
  pullUpLoad: true,
  bounce:{
    top:false,
    bottom:false
  }
})

onMounted(()=>{
  getRecycleBin()
})

function handleRS(done){
 page.value = {
    current:1,
    total:0,
    size:20
  }
  getRecycleBin(done)
}
function doAction(type){
  let recyclList = JSON.parse(JSON.stringify(fileList.value.filter(item => item.isCheck)))
  let ids = []
  recyclList.forEach((item)=>{
    delete item.updateTime
    ids.push(item.id)
  })
  switch(type){
    case 'recover':
      dclRetrieve(recyclList).then(res=>{
        if(res.data.code == 0){
          if(res.data.data.length==0){
            for(let i=0;i<recyclList.length;i++){
              delCheckedId(recyclList[i].id)
            }
            proxy.$mobileMessage({text:'操作成功',type:"success",});
          }else{
            let str = recyclList.length>1?",剩余文件的上级未恢复":",该文件的上级未恢复"
            proxy.$mobileMessage({text:`文件恢复失败${str}`,type:'error',})
          }              
        }
      })
      break;
    case 'thorough':
      delLib(ids).then(res=>{
        if(res.data.code==0){
          for(let i=0;i<ids.length;i++){
            delCheckedId(ids[i])
          }
          proxy.$mobileMessage({text:'操作成功',type:"success",});
        }
      })
      break;
  }
}

function delCheckedId(id){
  let index = fileList.value.findIndex((item)=>item.id==id)
  if(index!=-1){
    fileList.value.splice(index,1)
  }
}
function changeCheck(item,index){
  fileList.value[index].isCheck = !fileList.value[index].isCheck
  
}
// 回收站
function getRecycleBin(done) {
  const {size, current} =page.value
  const params = {
    size: size,
    current: current,
  }
  knowledgeRecycle(params).then(res => {
    if(res.data && res.data.code == 0) {
      fileList.value = res.data.data.records || []
      fileList.value.forEach(item=>{
        item.isCheck = false
      })
      if(done) {
        done()
        proxy.$mobileToast({
          text:$t('message.message.refreshSuccess'),
          top:'3rem'
        })
      }
    }
  }).catch(err=>{
    if(done) {
      done()
      proxy.$mobileToast({
        text:$t('message.message.refreshFail'),
        top:'3rem'
      })
    }
  })
}
function openChecks(){
  if(isOpenChecks.value){
    fileList.value.forEach(item=>{
      item.isCheck = true
    })
  }else{
    isOpenChecks.value = true
  }
}
function handleBack(val){
  if(isOpenChecks.value){
    fileList.value.forEach(item=>{
      item.isCheck = false
    })
    isOpenChecks.value = false
  }else{
    router.push(val)
  }
}
</script>
<style lang="scss" scoped>
.recycle-bin-box{
  position: relative;
  height: 100%;
  ::v-deep(.checks-button){
    font-size: .875rem;
    color: #363b4c;
    @include SourceHanSansCN-Regular;
  }
  .lately-list{
    // overflow-y: auto;
    width: 100%;
    position: relative;
    .lately-item{
      display: flex;
      align-items: center;
      padding: 0px 0px 0px .9375rem;
      .check-box{
        width: 1.125rem;
        height: 1.125rem;
        margin-right: 1.0625rem;
        .icon{
          width: 1.125rem;
          height: 1.125rem;
        }
      }
      .lately-item-icon{
        height: 4.25rem;
        display: flex;
        align-items: center;
        .icon{
          height: 1.375rem;
          width: 1.375rem;
        }
      }
      .lately-item-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: .75rem;
        padding-right: .9375rem;
        height: 4.25rem;
        border-bottom: .0625rem solid #eeeff0;
        .content{
          font-size: .9375rem;
          font-weight: 400;
          color: #363B4C;
          .name{
            @include SourceHanSansCN-Medium;
            margin-bottom: .25rem;
            max-width: calc(100% - 0rem);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .time{
            font-size: .875rem;
            font-weight: 400;
            color: #6f7588;
            @include SourceHanSansCN-Regular;
          }
        }
        .lately-actions{
          img{
            height: 1.375rem;
            width: 1.375rem;
          }
          img+img{
            margin-left: .75rem;
          }
        }
      }
    }
  }
  .actions-box{
    border-top: 1px solid #EEEFF0;
    display: flex;
    align-items: center;
    height: 4.25rem;
    .recycle-line{
      background: #D8D8D8;
      width: 1px;
      height: 2.5rem;
    }
    .recycle-button{
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 50%;
      .icon{
        width: 1.375rem;
        height: 1.375rem;
      }
      .name{
        margin-top: .5rem;
        color: #363B4C;
        @include SourceHanSansCN-Regular;
        font-size: .875rem;
      }
    }
  }
}
</style>